<template>
    <div class="app-container">
        <!--  功能区域 -->
        <el-form ref="form" :inline="true" :model="form" label-width="100px">
            <el-form-item label="实验室名">
                <el-input v-model="form.name" placeholder="请输入实验室名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="房间号">
                <el-input v-model="form.roomNumber" placeholder="请输入房间号" clearable></el-input>
            </el-form-item>
            <el-form-item label="实验室类型">
                <el-select v-model="form.typeId" placeholder="选择实验室类型" clearable>
                    <el-option v-for="item in laboratoryTypes" :key="item.id"
                        :label="item.name + '——' + item.description" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="实验室状态">
                <el-select v-model="form.status" placeholder="选择实验室状态" clearable>
                    <el-option label="可用" value="AVAILABLE"></el-option>
                    <el-option label="维护中" value="UNAVAILABLE"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-select v-model="form.enabled" placeholder="选择启用状态" clearable>
                    <el-option label="启用" :value="true"></el-option>
                    <el-option label="禁用" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="info" @click="handleReset">重置</el-button>
                <el-button type="success" @click="exportToExcel">导出当前页</el-button>
                <el-button type="warning" @click="exportAllToExcel">导出全部</el-button>
                <el-button type="primary" @click="addlaboratory">添加+</el-button>
                <el-button type="info" @click="showLaboratoryTypes">实验室类型</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list.content" style="width: 100%" element-loading-text="Loading" v-loading="listLoading"
            border>
            <el-table-column prop="name" label="实验室名" width="130">
            </el-table-column>
            <el-table-column prop="location" label="位置" width="100">
            </el-table-column>
            <el-table-column prop="roomNumber" label="门牌号" width="100">
            </el-table-column>
            <el-table-column prop="status" label="实验室状态" width="130">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" active-value="AVAILABLE" inactive-value="UNAVAILABLE"
                        active-color="#13ce66" inactive-color="#ff4949" :loading="scope.row.statusLoading"
                        @change="handleStatusChange(scope.row)" style="margin-right: 8px">
                    </el-switch>
                    <el-tag :type="scope.row.status === 'AVAILABLE' ? 'success' : 'danger'" disable-transitions>
                        {{ scope.row.status === 'AVAILABLE' ? '可用' : '维护中' }}
                    </el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="description" label="实验室描述" width="180">
            </el-table-column> -->
            <el-table-column prop="isOpen" label="是否开放预约" width="120">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isOpen" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="true" :inactive-value="false" @change="handleOpenChange(scope.row)">
                    </el-switch>
                    <span style="margin-left: 8px">{{ scope.row.isOpen ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="location" label="位置" width="180">
            </el-table-column> -->

            <el-table-column label="开放时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.timeSlots | dayOf }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="examine(scope.$index, scope.row)">查看</el-button>
                    <el-button type="primary" size="mini" @click="subscribe(scope.$index, scope.row)">查看预约信息</el-button>
                    <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                    <el-button type="danger" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="关联操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"
                        @click="updatetime(scope.$index, scope.row)">修改可预约时间段</el-button>
                    <el-button type="primary" size="mini"
                        @click="updatefac(scope.$index, scope.row)">修改实验室设备</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="pages.size" layout="total, sizes, prev, pager, next, jumper"
            :total="list.totalElements || 0">
        </el-pagination>
        <!-- 查看弹框1 -->
        <el-dialog title="实验室详细信息" :visible.sync="dialogVisible" width="60%">
            <div>{{ items.name }}</div>
            <div>{{ items.description }}</div>
            <div>{{ items.location }}-{{ items.roomNumber }}</div>
            <div>当前是否可用：{{ items.status == 'AVAILABLE' ? '是' : '否' }}</div>
            <div>当前是否开放预约：{{ items.isOpen ? '是' : '否' }}</div>
            <div v-for="item in items.timeSlots" :key="item.id">实验室可预约时间：{{ item.dayOfWeek }} {{
                item.startTime[0]
                }}点 - - {{ item.endTime[0] }}点 ---开放预约人数：{{ item.maxReservations }} 当前是否可预约：{{ item.available ?
                '是' :
                '否'
                }}</div>
            <div v-for="item in items.equipment" :key="item.id">实验室设备{{ item.name }} 型号：{{ item.model }} 设备简介{{
                item.description }} 数量{{ item.quantity }} </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
        <!-- 预约弹框 -->
        <el-dialog title="预约实验室" :visible.sync="dialogVisible2" width="60%">
            <div>{{ items.name }}</div>
            <div>{{ items.description }}</div>
            <div>{{ items.location }}-{{ items.roomNumber }}</div>
            <div>当前是可用：{{ items.status == 'AVAILABLE' ? '是' : '否' }}</div>
            <div>当前是否开放预约：{{ items.isOpen ? '是' : '否' }}</div>
            <!-- 表格 -->
            <el-table :data="lablist.content" style="width: 100%" element-loading-text="Loading" v-loading="listLoading"
                border>
                <el-table-column prop="laboratoryName" label="实验室名" width="180">
                </el-table-column>
                <el-table-column prop="laboratoryLocation" label="位置" width="180">
                </el-table-column>
                <el-table-column prop="userName" label="预约人">
                </el-table-column>
                <el-table-column prop="userPhone" label="预约人电话">
                </el-table-column>
                <el-table-column prop="purpose" label="预约目的">
                </el-table-column>
                <el-table-column prop="description" label="预约描述">
                </el-table-column>
                <el-table-column label="预约使用设备">
                    <template slot-scope="scope">
                        <span v-for="(item, index) in scope.row.equipmentInfo" :key="index">{{ item.name }} </span>
                    </template>
                </el-table-column>
                <!-- 审核状态 -->
                <el-table-column prop="status" label="预约状态" :formatter="formatStatus">
                    <template slot-scope="scope">
                        <el-tag :type="getStatusTagType(scope.row.status)" disable-transitions>
                            {{ formatStatus(scope.row) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="预约时间段">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startTime }}</span>--
                        <span>{{ scope.row.endTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" v-if="scope.row.status == 'PENDING'">
                        <el-button type="primary" size="mini" @click="pass(scope.$index, scope.row)">通过</el-button>
                        <el-button type="primary" size="mini" @click="refuse(scope.$index, scope.row)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="subscribet">预 约</el-button> -->
            </span>
        </el-dialog>
        <!-- 新增实验室 -->
        <el-dialog title="新增实验室" :visible.sync="dialogVisible3" width="60%">
            <!-- 表单 -->
            <el-form ref="form" :model="addform" label-width="140px">
                <el-form-item label="实验室名：">
                    <el-input v-model="addform.name"></el-input>
                </el-form-item>
                <el-form-item label="房间号：">
                    <el-input v-model="addform.roomNumber"></el-input>
                </el-form-item>
                <el-form-item label="所在位置：">
                    <el-input v-model="addform.location"></el-input>
                </el-form-item>
                <el-form-item label="可容纳预约人数：">
                    <el-input v-model="addform.capacity"></el-input>
                </el-form-item>
                <el-form-item label="实验室类型：">
                    <!-- <el-input v-model="addform.typeId"></el-input> -->
                    <el-select v-model="addform.typeId" placeholder="实验室类型" style="width: 100%;">
                        <el-option v-for="item in laboratoryTypes" :key="item.id"
                            :label="item.name + '——' + item.description" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="实验室描述：">
                    <el-input v-model="addform.description"></el-input>
                </el-form-item>
                <div>
                    <h3>设置实验室时间段</h3>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="周几：">
                            <el-select v-model="formInline.dayOfWeek" placeholder="星期X">
                                <el-option label="星期一" value="星期一"></el-option>
                                <el-option label="星期二" value="星期二"> </el-option>
                                <el-option label="星期三" value="星期三"> </el-option>
                                <el-option label="星期四" value="星期四"> </el-option>
                                <el-option label="星期五" value="星期五"> </el-option>
                                <el-option label="星期六" value="星期六"> </el-option>
                                <el-option label="星期日" value="星期日"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="时间段最大预约人数：">
                            <el-input v-model="formInline.maxReservations" placeholder="人数"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间：">
                            <el-time-picker v-model="formInline.startTime" value-format="HH:mm" format="HH:mm"
                                placeholder="选择时间"></el-time-picker>
                        </el-form-item>
                        <el-form-item label="结束时间：">
                            <el-time-picker v-model="formInline.endTime" value-format="HH:mm" format="HH:mm"
                                placeholder="选择时间"></el-time-picker>
                        </el-form-item>
                        <el-form-item label="是否开启预约：">
                            <el-radio-group v-model="formInline.available">
                                <el-radio :label="'true'">开启</el-radio>
                                <el-radio :label="'false'">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addtimers">添加时间段</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="timeSlots" border style="width: 100%; margin-top: 20px">
                    <el-table-column prop="dayOfWeek" label="周几" width="120">
                        <template #default="{ row }">
                            {{ formatDayOfWeek(row.dayOfWeek) }} <!-- 格式化显示周几 -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="maxReservations" label="最大预约人数" width="150" />
                    <el-table-column prop="startTime" label="开始时间" width="180" />
                    <el-table-column prop="endTime" label="结束时间" width="180" />
                    <el-table-column prop="available" label="是否开启" width="120">
                        <template #default="{ row }">
                            <el-tag :type="row.available ? 'success' : 'danger'">
                                {{ row.available ? "开启" : "关闭" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template #default="{ $index }">
                            <el-button size="mini" type="danger" @click="deleteTimeSlot($index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="addlaboratorys">添加</el-button>
            </span>
        </el-dialog>
        <el-dialog title="实验室编辑" :visible.sync="dialogVisible4" width="60%">
            <!-- 表单 -->
            <el-form ref="form" :model="updateform" label-width="140px">
                <el-form-item label="实验室名：">
                    <el-input v-model="updateform.name"></el-input>
                </el-form-item>
                <el-form-item label="房间号：">
                    <el-input v-model="updateform.roomNumber"></el-input>
                </el-form-item>
                <el-form-item label="所在位置：">
                    <el-input v-model="updateform.location"></el-input>
                </el-form-item>
                <el-form-item label="可容纳预约人数：">
                    <el-input v-model="updateform.capacity"></el-input>
                </el-form-item>
                <el-form-item label="实验室类型：">
                    <!-- <el-input v-model="addform.typeId"></el-input> -->
                    <el-select v-model="updateform.typeId" placeholder="实验室类型" style="width: 100%;">
                        <el-option v-for="item in laboratoryTypes" :key="item.id"
                            :label="item.name + '——' + item.description" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="实验室描述：">
                    <el-input v-model="updateform.description"></el-input>
                </el-form-item>
                <!-- <div>
                    <h3>设置实验室时间段</h3>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="周几：">
                            <el-select v-model="formInline.dayOfWeek" placeholder="活动区域">
                                <el-option label="星期一" value="星期一"></el-option>
                                <el-option label="星期二" value="星期二"> </el-option>
                                <el-option label="星期三" value="星期三"> </el-option>
                                <el-option label="星期四" value="星期四"> </el-option>
                                <el-option label="星期五" value="星期五"> </el-option>
                                <el-option label="星期六" value="星期六"> </el-option>
                                <el-option label="星期日" value="星期日"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="时间段最大预约人数：">
                            <el-input v-model="formInline.maxReservations" placeholder="人数"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间：">
                            <el-time-picker v-model="formInline.startTime" value-format="HH:mm" format="HH:mm"
                                placeholder="选择时间"></el-time-picker>
                        </el-form-item>
                        <el-form-item label="结束时间：">
                            <el-time-picker v-model="formInline.endTime" value-format="HH:mm" format="HH:mm"
                                placeholder="选择时间"></el-time-picker>
                        </el-form-item>
                        <el-form-item label="是否开启预约：">
                            <el-radio-group v-model="formInline.available">
                                <el-radio :label="'true'">开启</el-radio>
                                <el-radio :label="'false'">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addtimers">添加时间段</el-button>
                        </el-form-item>
                    </el-form>
                </div> -->
                <!-- <el-table :data="timeSlots" border style="width: 100%; margin-top: 20px">
                    <el-table-column prop="dayOfWeek" label="周几" width="120">
                        <template #default="{ row }">
                            {{ formatDayOfWeek(row.dayOfWeek) }}  -->
                <!-- 格式化显示周几 -->
                <!-- </template>
                    </el-table-column>
                    <el-table-column prop="maxReservations" label="最大预约人数" width="150" />
                    <el-table-column prop="startTime" label="开始时间" width="180" />
                    <el-table-column prop="endTime" label="结束时间" width="180" />
                    <el-table-column prop="available" label="是否开启" width="120">
                        <template #default="{ row }">
                            <el-tag :type="row.available ? 'success' : 'danger'">
                                {{ row.available ? "开启" : "关闭" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template #default="{ $index }">
                            <el-button size="mini" type="danger" @click="deleteTimeSlot($index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="update(updateform)">修改</el-button>
            </span>
        </el-dialog>
        <!-- 修改可预约时间段，修改实验室设备 -->
        <el-dialog title="新增实验室" :visible.sync="dialogVisible5" width="60%">
            <!-- 表单 -->
            <div>
                <h3>设置实验室时间段</h3>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="周几：">
                        <el-select v-model="formInline.dayOfWeek" placeholder="星期X">
                            <el-option label="星期一" value="星期一"></el-option>
                            <el-option label="星期二" value="星期二"> </el-option>
                            <el-option label="星期三" value="星期三"> </el-option>
                            <el-option label="星期四" value="星期四"> </el-option>
                            <el-option label="星期五" value="星期五"> </el-option>
                            <el-option label="星期六" value="星期六"> </el-option>
                            <el-option label="星期日" value="星期日"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间段最大预约人数：">
                        <el-input v-model="formInline.maxReservations" placeholder="人数"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间：">
                        <el-time-picker v-model="formInline.startTime" value-format="HH:mm" format="HH:mm"
                            placeholder="选择时间"></el-time-picker>
                    </el-form-item>
                    <el-form-item label="结束时间：">
                        <el-time-picker v-model="formInline.endTime" value-format="HH:mm" format="HH:mm"
                            placeholder="选择时间"></el-time-picker>
                    </el-form-item>
                    <el-form-item label="是否开启预约：">
                        <el-radio-group v-model="formInline.available">
                            <el-radio label="true">开启</el-radio>
                            <el-radio label="false">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addtimers('a')">添加时间段</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="timeSlots" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="dayOfWeek" label="周几" width="120">
                    <template #default="{ row }">
                        {{ formatDayOfWeek(row.dayOfWeek) }} <!-- 格式化显示周几 -->
                    </template>
                </el-table-column>
                <el-table-column prop="maxReservations" label="最大预约人数" width="150" />
                <el-table-column prop="startTime" label="开始时间" width="180" />
                <el-table-column prop="endTime" label="结束时间" width="180" />
                <el-table-column prop="available" label="快捷修改是否开启" width="140">
                    <template #default="{ row }">
                        <el-tag :type="row.available ? 'success' : 'danger'">
                            {{ row.available ? "开启" : "关闭" }}
                        </el-tag>
                        <el-switch v-model="row.available" active-color="#13ce66" inactive-color="#ff4949"
                            :active-value="true" :inactive-value="false" @change="updatetAvailability(row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="available" label="操作" width="120">
                    <template #default="{ $index }">
                        <el-button size="mini" type="danger" @click="deleteTimeSlott($index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible5 = false">取 消</el-button>
                <el-button type="primary" @click="updatetim()">保存修改</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改实验室设备" :visible.sync="dialogVisible6" width="60%">
            <!-- 表单 -->
            <h2>当前已有的实验室设备</h2>
            <div>
                <el-table :data="equipmentList" border style="width: 100%; margin-top: 20px">
                    <el-table-column prop="name" label="设备名称" width="180">
                    </el-table-column>
                    <el-table-column prop="quantity" label="设备数量" width="180">
                    </el-table-column>
                    <el-table-column prop="model" label="设备型号" width="180">
                    </el-table-column>
                    <el-table-column prop="description" label="设备描述" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="设备状态" width="180">
                        <template #default="{ row }">
                            <el-tag :type="row.status == 'NORMAL' ? 'success' : 'danger'">
                                {{ row.status == 'NORMAL' ? "可用" : "不可用" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="available" label="操作" width="180">
                        <template #default="{ row }">
                            <el-button size="mini" type="danger" @click="deleteEq(row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <h3>设置实验室设备</h3>
            <el-form :inline="true" :model="addformEq" label-width="100px" style="margin-top: 20px">
                <el-form-item label="设备名称：">
                    <el-input v-model="addformEq.name" placeholder="请输入设备名称"></el-input>
                </el-form-item>
                <el-form-item label="设备数量：">
                    <el-input v-model="addformEq.quantity" placeholder="请输入设备数量"></el-input>
                </el-form-item>
                <el-form-item label="设备型号：">
                    <el-input v-model="addformEq.model" placeholder="请输入设备型号"></el-input>
                </el-form-item>
                <el-form-item label="设备描述：">
                    <el-input v-model="addformEq.description" placeholder="请输入设备描述"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addEqt()">添加</el-button>
                </el-form-item>
            </el-form>
            <!-- 添加的设备表格 -->
            <h3>本次添加的设备</h3>
            <el-table :data="addequipmentList" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="name" label="设备名称" width="180">
                </el-table-column>
                <el-table-column prop="quantity" label="设备数量" width="180">
                </el-table-column>
                <el-table-column prop="model" label="设备型号" width="180">
                </el-table-column>
                <el-table-column prop="description" label="设备描述" width="180">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible6 = false">取 消</el-button>
                <el-button type="primary" @click="updateEq()">完成</el-button>
            </span>
        </el-dialog>
        
        <!-- 实验室类型管理弹框 -->
        <el-dialog title="实验室类型管理" :visible.sync="dialogVisible7" width="80%">
            <div style="margin-bottom: 20px;">
                <el-button type="primary" @click="showAddTypeForm = true">添加实验室类型</el-button>
            </div>
            
            <!-- 实验室类型列表表格 -->
            <el-table :data="laboratoryTypesList" style="width: 100%" element-loading-text="Loading" v-loading="typesLoading"
                border>
                <el-table-column prop="name" label="类型名称" width="200">
                </el-table-column>
                <el-table-column prop="code" label="类型代码" width="150">
                </el-table-column>
                <el-table-column prop="description" label="类型描述" width="300">
                </el-table-column>
                <el-table-column prop="enabled" label="是否启用" width="120">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.enabled" active-color="#13ce66" inactive-color="#ff4949"
                            :loading="scope.row.statusLoading" @change="handleTypeStatusChange(scope.row)">
                        </el-switch>
                        <el-tag :type="scope.row.enabled ? 'success' : 'danger'" style="margin-left: 8px">
                            {{ scope.row.enabled ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 添加实验室类型表单 -->
            <el-dialog title="添加实验室类型" :visible.sync="showAddTypeForm" width="50%" append-to-body>
                <el-form ref="typeForm" :model="newTypeForm" :rules="typeFormRules" label-width="120px">
                    <el-form-item label="类型名称：" prop="name">
                        <el-select v-model="newTypeForm.name" placeholder="选择或输入类型名称" filterable allow-create>
                            <el-option v-for="item in presetLabTypes" :key="item.name" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类型代码：" prop="code">
                        <el-select v-model="newTypeForm.code" placeholder="选择或输入类型代码" filterable allow-create @change="handleCodeChange">
                            <el-option v-for="item in presetLabTypes" :key="item.code" :label="`${item.name} (${item.code})`" :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类型描述：" prop="description">
                        <el-input type="textarea" v-model="newTypeForm.description" placeholder="请输入类型描述" :rows="3"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showAddTypeForm = false">取 消</el-button>
                    <el-button type="primary" @click="addLaboratoryType">添加</el-button>
                </span>
            </el-dialog>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible7 = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getList, getEquipmentList, getTimerList, reservations, getlLaboratoriesTypes, addLaboratory, getLaboratoryTypes, createLaboratoryType, enableLaboratoryType, disableLaboratoryType } from '@/api/table'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import { getAppointmentInfoByLabId, deleteLaboratory, updateLaboratoryInfo, updateLaboratoryStatus, updateLaboratoryCapacity, getLaboratoryTimeSlots, updateLaboratoryTimeSlots, updateLaboratoryTimeSlotAvailability, getEquipmentListByLabId, deleteEquipment, addLaboratoryEquipment } from '@/api/Teacher'
export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            addformEq: {},
            id: '',
            list: { content: [] },
            listLoading: true,
            form: {
                name: '',
                roomNumber: '',
                typeId: '',
                status: '',
                enabled: ''
            },
            forms: {},
            currentPage: 1,
            pages: {
                page: 0,
                size: 10
            },
            dialogVisible: false,
            dialogVisible2: false,
            items: {},
            //设备列表
            equipmentList: [],
            addequipmentList: [],
            //可预约时间段
            timerList: [],
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            dialogVisible6: false,
            updateform: {},
            addform: {},
            formInline: {
                dayOfWeek: '',
                maxReservations: '',
                startTime: '',
                endTime: '',
                available: 'true'
            },
            timeSlots: [],
            laboratoryTypes: [],
            // 特定实验室的预约列表
            lablist: {},
            dialogVisible7: false,
            showAddTypeForm: false,
            newTypeForm: {},
            typeFormRules: {
                name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
                code: [{ required: true, message: '请选择或输入类型代码', trigger: 'change' }],
                description: [{ required: true, message: '请输入类型描述', trigger: 'blur' }]
            },
            laboratoryTypesList: [],
            typesLoading: false,
            // 预设类型
            presetLabTypes: [
                { name: '物理实验室', code: 'PHYSICS_LAB' },
                { name: '化学实验室', code: 'CHEMISTRY_LAB' },
                { name: '生物实验室', code: 'BIOLOGY_LAB' },
                { name: '计算机实验室', code: 'COMPUTER_LAB' },
                { name: '电子实验室', code: 'ELECTRONICS_LAB' },
                { name: '机械实验室', code: 'MECHANICAL_LAB' }
            ]
        }
    },
    created() {
        this.fetchData()
        // 获取实验室类型数据
        this.fetchLaboratoryTypes()
    },
    filters: {
        trimSeconds(timeString) {
            if (!timeString) return '';
            return timeString.replace(/^(\d{2}:\d{2})(:\d{2}(\.\d+)?)?$/, '$1');
        },
        // 相同的过滤
        dayOf(day) {
            let dayOfWeek = [];
            if (day.length === 0) return '';
            for (let i = 0; i < day.length; i++) {
                if (dayOfWeek.indexOf(day[i].dayOfWeek) === -1) {
                    dayOfWeek.push(day[i].dayOfWeek);
                }
            }
            return dayOfWeek.join(',');
        }
    },
    methods: {
        fetchData() {
            this.listLoading = true
            // 合并分页参数和查询参数
            const params = {
                ...this.pages,
                ...this.form
            };
            // 移除空值参数
            Object.keys(params).forEach(key => {
                if (params[key] === '' || params[key] === null || params[key] === undefined) {
                    delete params[key];
                }
            });
            
            getList(params).then(response => {
                this.list = response.data
                this.listLoading = false
                console.log(this.list);
            }).catch(error => {
                this.listLoading = false
                console.error('获取数据失败:', error);
                this.$message.error('获取数据失败');
            })
        },
        // 状态格式化
        formatStatus(row) {
            const statusMap = {
                'PENDING': '待审核',
                'APPROVED': '已批准',
                'REJECTED': '已拒绝',
                'CANCELLED': '已取消',
                'COMPLETED': '已完成',
                'EXPIRED': '已过期'
            };
            return statusMap[row.status] || row.status;
        },
        // 颜色格式化
        getStatusTagType(status) {
            const typeMap = {
                'PENDING': 'warning',      // 待审核 - 黄色
                'APPROVED': 'success',    // 已批准 - 绿色
                'REJECTED': 'danger',     // 已拒绝 - 红色
                'CANCELLED': 'info',      // 已取消 - 蓝色
                'COMPLETED': '',          // 已完成 - 默认灰色
                'EXPIRED': 'danger'       // 已过期 - 红色
            };
            return typeMap[status] || '';
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pages.size = val;
            this.pages.page = 0; // 重置到第一页
            this.currentPage = 1;
            this.fetchData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.pages.page = val - 1; // 后端从0开始，前端从1开始
            this.fetchData();
        },
        // 查看按钮
        examine(index, row) {
            this.dialogVisible = true;
            this.items = row;
            console.log(index, row);

        },
        // 通过按钮
        pass(index, row) {
            putReservations(row.id, { status: 'APPROVED' }).then(res => {
                console.log(res);
                this.$message.success('审核通过成功');
                // 刷新预约列表
                this.subscribe(index, row);
            }).catch(error => {
                console.error('审核失败:', error);
                this.$message.error('审核失败，请重试');
            });
        },
        // 拒绝按钮
        refuse(index, row) {
            putReservations(row.id, { status: 'REJECTED' }).then(res => {
                console.log(res);
                this.$message.success('审核拒绝成功');
                // 刷新预约列表
                this.subscribe(index, row);
            }).catch(error => {
                console.error('审核失败:', error);
                this.$message.error('审核失败，请重试');
            });
        },
        // 查看当前实验室的预约信息
        subscribe(index, row) {
            this.dialogVisible2 = true;
            this.forms.laboratoryId = row.id
            // getEquipmentList(row.id).then(res => {
            //     this.equipmentList = res.data;
            //     console.log('实验室设备', res);
            // })
            // getTimerList(row.id).then(res => {
            //     this.timerList = res.data;
            //     console.log('可预约时间段', res.data);
            // })
            this.items = row;
            getAppointmentInfoByLabId(row.id).then(res => {
                this.lablist = res.data;
                console.log('预约列表', res.data);

            })
            // console.log(index, row);

        },
        // 编辑实验室
        handleEdit(index, row) {
            this.updateform = row;
            getlLaboratoriesTypes().then(res => {
                console.log('实验室类型', res);
                this.laboratoryTypes = res.data;
            })
            this.dialogVisible4 = true;
        },
        // 删除按钮
        del(index, row) {
            this.$confirm('确定要删除这个实验室吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteLaboratory(row.id).then(res => {
                    console.log(res);
                    this.$message.success('删除成功');
                    this.fetchData(); // 刷新列表
                }).catch(error => {
                    console.error('删除失败:', error);
                    this.$message.error('删除失败，请重试');
                });
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        // 判断选中的事件与预约时间是否冲突
        breaktime(val) {
            const date = new Date(val);
            console.log(date.getDay());
            const dayOfWeek = date.getDay();
            const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            const weekdayStr = weekdays[dayOfWeek];
            if (!this.forms.timeSlotId) {
                this.$message.error('请先选择时间段');
                this.forms.reservationDate = '';
                return;
            }
            for (let i = 0; i < this.timerList.length; i++) {
                if (this.timerList[i].id === this.forms.timeSlotId) {
                    if (this.timerList[i].dayOfWeek !== weekdayStr) {
                        this.$message.error('所选时间段与日期不匹配');
                        this.forms.reservationDate = '';
                        return;
                    }
                }
            }
        },
        // 修改实验室的预约状态
        handleOpenChange(row) {
            updateLaboratoryStatus(row.id, row.isOpen).then(res => {
                this.$message.success('状态更新成功');
            }).catch(error => {
                // 如果更新失败，恢复原来的状态
                this.$message.error('状态更新失败');
            });
        },
        // 修改实验室启用状态
        handleStatusChange(row) {
            console.log(row);
            
            updateLaboratoryCapacity(row.id, row.status).then(res => {
                this.$message.success('状态更新成功');
            }).catch(error => {
                // 如果更新失败，恢复原来的状态
                this.$message.error('状态更新失败');
            })
        },
        // 预约
        // subscribet() {
        //     console.log(this.forms);

        // reservations(this.forms).then(res => {
        //     this.dialogVisible2 = false
        //     console.log(res);
        // })
        // },
        addtimers(a) {
            console.log(this.formInline.available);

            if (
                !this.formInline.dayOfWeek ||
                !this.formInline.maxReservations ||
                !this.formInline.startTime ||
                !this.formInline.endTime ||
                !this.formInline.available
            ) {
                this.$message.error("请填写完整信息！");
                return;
            }
            // 构造新时间段对象
            const newTimeSlot = {
                dayOfWeek: this.formInline.dayOfWeek,
                maxReservations: this.formInline.maxReservations,
                startTime: this.formInline.startTime,
                endTime: this.formInline.endTime,
                available: Boolean(this.formInline.available)
            };

            // 添加到表格数据
            this.timeSlots.push(newTimeSlot);
            console.log(this.timeSlots);

            // 清空表单（可选）
            this.formInline.dayOfWeek = "";
            this.formInline.maxReservations = "";
            this.formInline.startTime = "";
            this.formInline.endTime = "";
            this.formInline.available = "true";
            if (a == 'a') {
                this.$message.success("时间段添后需点击保存！");
            } else {
                this.$message.success("时间段添加成功！");
            }
        },

        // 格式化
        formatDayOfWeek(day) {
            const daysMap = {
                MONDAY: "星期一",
                TUESDAY: "星期二",
                WEDNESDAY: "星期三",
                THURSDAY: "星期四",
                FRIDAY: "星期五",
                SATURDAY: "星期六",
                SUNDAY: "星期日",
            };
            return daysMap[day] || day;
        },
        // 删除时间段
        deleteTimeSlot(index) {
            this.timeSlots.splice(index, 1);
            this.$message.success("删除成功！");
        },
        deleteTimeSlott(index) {
            this.timeSlots.splice(index, 1);
            this.$message.success("删除时间段需要点击保存！");
        },
        // 确认添加实验室
        addlaboratorys() {
            console.log(this.addform, this.timeSlots);
            let addformer = {}
            addformer = this.addform
            addformer.timeSlots = this.timeSlots
            console.log(addformer);
            addLaboratory(addformer).then(res => {
                console.log(res);
                this.$message.success('添加实验室成功');
                this.dialogVisible3 = false; // 关闭弹框
                this.fetchData(); // 刷新列表
                // 重置表单
                this.addform = {};
                this.timeSlots = [];
                this.formInline = {
                    dayOfWeek: '',
                    maxReservations: '',
                    startTime: '',
                    endTime: '',
                    available: 'true'
                };
            }).catch(error => {
                console.error('添加实验室失败:', error);
                this.$message.error('添加实验室失败，请重试');
            });
        },
        // 添加实验室
        openadddialog() {
            getlLaboratoriesTypes().then(res => {
                console.log('实验室类型', res);
                this.laboratoryTypes = res.data;
            })
            this.dialogVisible3 = true
        },

        // 修改实验室信息
        update(data) {
            console.log(data);
            let updata = {}
            updata.name = data.name
            updata.description = data.description
            updata.location = data.location
            updata.roomNumber = data.roomNumber
            updata.capacity = data.capacity
            updata.type = data.type
            updateLaboratoryInfo(data.id, updata).then(res => {
                console.log(res);
                this.$message.success('修改实验室信息成功');
                this.dialogVisible4 = false; // 关闭弹框
                this.fetchData(); // 刷新列表
            }).catch(error => {
                console.error('修改实验室信息失败:', error);
                this.$message.error('修改实验室信息失败，请重试');
            });
        },
        // 查询实验室时间段
        gettime() {

        },
        // 修改实验室时间段
        updatetime(index, row) {
            // let updatetime = {}
            // updatetime.timeSlots = this.timeSlots
            // updateLaboratoryTimeSlots(data.id, updatetime).then(res => {
            //     console.log(res);
            // })
            console.log(row);
            this.id = row.id
            this.dialogVisible5 = true
            getLaboratoryTimeSlots(row.id).then(res => {
                console.log(res.data);
                // log(res.data.startTime);
                this.timeSlots = res.data
                // this.timeSlots.startTime = 
                for (let i = 0; i < res.data.length; i++) {
                    // console.log(res.data[i].startTime[0].toString().padStart(2, '0'));

                    let hours = res.data[i].startTime[0].toString().padStart(2, '0');
                    let minutes = res.data[i].startTime[1].toString().padStart(2, '0');
                    this.timeSlots[i].startTime = `${hours}:${minutes}`
                    console.log(`${hours}:${minutes}`);

                    let ehours = res.data[i].endTime[0].toString().padStart(2, '0');
                    let eminutes = res.data[i].endTime[1].toString().padStart(2, '0');
                    this.timeSlots[i].endTime = `${ehours}:${eminutes}`
                }
            })
        },
        updatetim() {
            console.log();
            updateLaboratoryTimeSlots(this.id, this.timeSlots).then(res => {
                this.$message.success('修改时间段成功');
                this.dialogVisible5 = false; // 关闭弹框
                this.fetchData(); // 刷新列表
            }).catch(error => {
                console.error('修改时间段失败:', error);
                this.$message.error('修改时间段失败，请重试');
            });
        },
        // 查询实验室
        search() {
            console.log(this.searchForm);
            getLaboratoryByCondition(this.searchForm).then(res => {
                console.log(res);
            })
        },
        // 查询实验室类型
        searchtype() {
            getlLaboratoriesTypes().then(res => {
                console.log(res);
            })
        },

        // 更新实验室时间的状态
        updatetAvailability(row) {
            console.log(row.available);
            let datas = {}
            datas.available = row.available
            console.log(datas.available);

            updateLaboratoryTimeSlotAvailability(row.id, datas).then(res => {
                console.log(res);

            })

        },
        // 修改实验室设备
        updatefac(index, row) {
            this.dialogVisible6 = true
            this.id = row.id
            console.log(row);
            
            getEquipmentListByLabId(row.id).then(res => {
                console.log(res);
                this.equipmentList = res.data
            })
        },
        // 删除设备
        deleteEq(id) {
            this.$confirm('确定要删除这个设备吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteEquipment(id).then(res => {
                    console.log(res);
                    this.$message.success('删除设备成功');
                    // 刷新设备列表
                    this.updatefac(null, { id: this.id });
                }).catch(error => {
                    console.error('删除设备失败:', error);
                    this.$message.error('删除设备失败，请重试');
                });
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        // 添加新设备
        addEqt() {
            console.log(this.addformEq);
            let addEq = {
                name: this.addformEq.name,
                description: this.addformEq.description,
                laboratoryId: this.id,
                model: this.addformEq.model,
                quantity: this.addformEq.quantity,
                type: this.addformEq.type,
                status: 'NORMAL',
            }
            this.addequipmentList.push(addEq)
            addLaboratoryEquipment(addEq).then(res => {
                console.log(res);
                this.$message.success('添加设备成功');
                // 刷新设备列表
                this.updatefac(null, { id: this.id });
                // 重置表单
                this.addformEq = {};
            }).catch(error => {
                console.error('添加设备失败:', error);
                this.$message.error('添加设备失败，请重试');
            });
        },
        updateEq() {
            this.dialogVisible6 = false
        },
        handleSearch() {
            // 实现查询功能
            this.pages.page = 0;
            this.currentPage = 1;
            this.fetchData();
        },
        handleReset() {
            // 重置查询条件
            this.form = {
                name: '',
                roomNumber: '',
                typeId: '',
                status: '',
                enabled: ''
            };
            // 重置分页
            this.pages.page = 0;
            this.currentPage = 1;
            // 重新获取数据
            this.fetchData();
        },
        exportToExcel() {
            // 导出当前页Excel功能
            if (!this.list.content || this.list.content.length === 0) {
                this.$message.warning('没有数据可导出');
                return;
            }

            // 准备导出数据
            const exportData = this.list.content.map(item => ({
                '实验室名称': item.name || '',
                '房间号': item.roomNumber || '',
                '位置': item.location || '',
                '容量': item.capacity || '',
                '类型': item.type ? item.type.name : '',
                '描述': item.description || '',
                '状态': item.status === 'AVAILABLE' ? '可用' : '不可用',
                '是否开放预约': item.isOpen ? '是' : '否'
            }));

            // 创建工作表
            const worksheet = XLSX.utils.json_to_sheet(exportData);
            
            // 设置列宽
            const columnWidths = [
                { wch: 15 }, // 实验室名称
                { wch: 10 }, // 房间号
                { wch: 15 }, // 位置
                { wch: 10 }, // 容量
                { wch: 15 }, // 类型
                { wch: 30 }, // 描述
                { wch: 10 }, // 状态
                { wch: 15 }  // 是否开放预约
            ];
            worksheet['!cols'] = columnWidths;

            // 创建工作簿
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, '实验室信息');

            // 生成文件名（包含当前时间）
            const now = new Date();
            const timestamp = `${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`;
            const fileName = `实验室信息_${timestamp}.xlsx`;

            // 导出文件
            const excelBuffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
            const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            FileSaver.saveAs(blob, fileName);

            this.$message.success('导出成功');
        },
        exportAllToExcel() {
            // 导出全部数据功能
            this.$confirm('确定要导出全部实验室信息吗？这可能需要一些时间。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.exportAllData();
            }).catch(() => {
                this.$message.info('已取消导出');
            });
        },
        async exportAllData() {
            try {
                this.$message.info('正在获取全部数据，请稍候...');
                
                // 获取所有数据（不分页）
                const allDataParams = {
                    page: 0,
                    size: 10000 // 设置一个很大的数字来获取所有数据
                };
                
                const response = await getList(allDataParams);
                const allData = response.data.content || [];
                
                if (allData.length === 0) {
                    this.$message.warning('没有数据可导出');
                    return;
                }

                // 准备导出数据
                const exportData = allData.map(item => ({
                    '实验室名称': item.name || '',
                    '房间号': item.roomNumber || '',
                    '位置': item.location || '',
                    '容量': item.capacity || '',
                    '类型': item.type ? item.type.name : '',
                    '描述': item.description || '',
                    '状态': item.status === 'AVAILABLE' ? '可用' : '不可用',
                    '是否开放预约': item.isOpen ? '是' : '否'
                }));

                // 创建工作表
                const worksheet = XLSX.utils.json_to_sheet(exportData);
                
                // 设置列宽
                const columnWidths = [
                    { wch: 15 }, // 实验室名称
                    { wch: 10 }, // 房间号
                    { wch: 15 }, // 位置
                    { wch: 10 }, // 容量
                    { wch: 15 }, // 类型
                    { wch: 30 }, // 描述
                    { wch: 10 }, // 状态
                    { wch: 15 }  // 是否开放预约
                ];
                worksheet['!cols'] = columnWidths;

                // 创建工作簿
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook, worksheet, '全部实验室信息');

                // 生成文件名（包含当前时间）
                const now = new Date();
                const timestamp = `${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`;
                const fileName = `全部实验室信息_${timestamp}.xlsx`;

                // 导出文件
                const excelBuffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
                const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                FileSaver.saveAs(blob, fileName);

                this.$message.success(`导出成功，共导出 ${allData.length} 条记录`);
            } catch (error) {
                console.error('导出失败:', error);
                this.$message.error('导出失败，请重试');
            }
        },
        addlaboratory() {
            // 实现添加实验室功能
            this.dialogVisible3 = true;
        },
        fetchLaboratoryTypes() {
            getlLaboratoriesTypes().then(res => {
                console.log('实验室类型', res);
                this.laboratoryTypes = res.data;
            })
        },
        showLaboratoryTypes() {
            // 实现显示实验室类型的功能
            this.dialogVisible7 = true;
            this.fetchLaboratoryTypesList();
        },
        fetchLaboratoryTypesList() {
            this.typesLoading = true;
            getLaboratoryTypes().then(res => {
                console.log('实验室类型API响应:', res);
                console.log('响应数据类型:', typeof res.data);
                console.log('响应数据是否为数组:', Array.isArray(res.data));
                
                // 确保数据是数组格式
                if (res.data && Array.isArray(res.data)) {
                    this.laboratoryTypesList = res.data;
                } else if (res.data && res.data.content && Array.isArray(res.data.content)) {
                    this.laboratoryTypesList = res.data.content;
                } else if (res.data && Array.isArray(res.data.content)) {
                    this.laboratoryTypesList = res.data.content;
                } else {
                    this.laboratoryTypesList = [];
                }
                
                console.log('最终laboratoryTypesList:', this.laboratoryTypesList);
                this.typesLoading = false;
            }).catch(error => {
                this.typesLoading = false;
                this.laboratoryTypesList = []; // 出错时设置为空数组
                console.error('获取实验室类型列表失败:', error);
                this.$message.error('获取实验室类型列表失败');
            });
        },
        handleTypeStatusChange(row) {
            // 实现修改实验室类型状态的功能
            row.statusLoading = true;
            const apiCall = row.enabled ? enableLaboratoryType(row.id) : disableLaboratoryType(row.id);
            
            apiCall.then(res => {
                this.$message.success('状态更新成功');
                row.statusLoading = false;
            }).catch(error => {
                // 如果更新失败，恢复原来的状态
                row.enabled = !row.enabled;
                row.statusLoading = false;
                console.error('状态更新失败:', error);
                this.$message.error('状态更新失败，请重试');
            });
        },
        addLaboratoryType() {
            // 实现添加实验室类型的功能
            this.$refs.typeForm.validate((valid) => {
                if (valid) {
                    createLaboratoryType(this.newTypeForm).then(res => {
                        this.$message.success('添加实验室类型成功');
                        this.fetchLaboratoryTypesList();
                        this.showAddTypeForm = false;
                        // 重置表单
                        this.newTypeForm = {};
                        this.$refs.typeForm.resetFields();
                    }).catch(error => {
                        console.error('添加实验室类型失败:', error);
                        this.$message.error('添加实验室类型失败，请重试');
                    });
                } else {
                    this.$message.error('请填写完整信息');
                }
            });
        },
        handleCodeChange(code) {
            // 处理类型代码变化
            const selectedType = this.presetLabTypes.find(item => item.code === code);
            if (selectedType) {
                this.newTypeForm.name = selectedType.name;
            }
        }
    }
}
</script>